<template>
  <div class="sucaiPage ">
    <div class="clearfix">
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen2.png" alt />
        <p class="title">剧烈</p>
      </div>
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen3.png" alt />
        <p class="title">有氧运动</p>
      </div>
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen4.png" alt />
        <p class="title">舒缓</p>
      </div>
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen5.png" alt />
        <p class="title">瑜伽</p>
      </div>
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen6.png" alt />
        <p class="title">慢跑</p>
      </div>
      <div class="sucaiBox">
        <img src="http://localhost:5200/api/jianshen7.png" alt />
        <p class="title">快跑</p>
      </div>
    </div>

    <div class="marginbottom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {}
};
</script>

<style lang="less" scoped>
.sucaiPage {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  .marginbottom {
    height: 2rem;
  }
  .sucaiBox {
    float: left;
    width: 50%;
    img {
      display: block;
      width: 50%;
      margin: 0.8rem auto 0.3rem;
    }
    .title {
      padding-left: 0.8rem;
      box-sizing: border-box;
    }
  }
}
</style>